<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Arvato企业微信后台管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../static/css/font.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<link rel="stylesheet" href="../../static/css/font-awesome-4.7.0/css/font-awesome.min.css">
		<style type="text/css">
			.department {
				width: 255px;
				height: 100%;
				float: left;
			}
			
			.weadmin-body {
				margin-left: 255px;
			}
			
			.menuUl {
				margin-left: 20px;
			}
			
			.innerUl {
				position: relative;
			}
			
			.innerUlEdit {
				position: absolute;
				top: 5px;
				right: 60px;
				cursor: pointer;
				display: none;
			}
			
			.innerUl>.menuUl {
				margin-left: 5px;
			}
			
			.menuUl li {
				margin: 10px 0 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.menuUl li span:hover {
				text-decoration: underline;
				cursor: pointer;
			}
			
			.menuUl li i {
				margin-right: 10px;
				top: 0px;
				cursor: pointer;
				color: #161616;
			}
			
			.operate {
				position: fixed;
				left: 0;
				top: 0;
				width: 80px;
				overflow: hidden;
				display: none;
				background: #ffffff;
				border: 1px solid #eee;
				z-index: 99;
				opacity: 0.9;
			}
			
			.operate div {
				height: 30px;
				border-top: 1px solid #eee;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
			
			.operate div:hover {
				color: #666666;
				background: #efdbdc;
			}
			
			.operate div:nth-of-type(1) {
				border: 0;
			}
			
			.confirm {
				padding-top: 10px;
				width: 300px;
				height: 200px;
				position: fixed;
				margin: auto;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: #EEEEEE;
				display: none;
				z-index: 99;
			}
			
			.confirm p {
				text-align: center;
				font-size: 18px;
			}
			
			.confirm input {
				display: block;
				width: 200px;
				height: 30px;
				border-radius: 5px;
				border: none;
				padding-left: 10px;
				margin: 10px auto;
			}
			
			.confirm span {
				display: block;
				font-size: 16px;
				text-align: center;
				margin: 40px auto;
			}
			
			.confirm button {
				width: 60px;
				height: 30px;
				border-radius: 2px;
				border: none;
				background: #009688;
				margin: 10px 43px;
				color: #FFFFFF;
				cursor: pointer;
			}

		</style>
	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb">
		        <a href="">员工管理</a>
		        <a>
		          <cite>员工列表</cite>
		        </a>
		    </span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<div class="department">
			<div class="innerUl">
				<i class="innerUlEdit fa fa-pencil-square-o"></i>
			</div>
		</div>
		<div class="weadmin-body">
			<div class="weadmin-block">
				<button style="margin-left:10px;" class="layui-btn" onclick="addResource()"><i class="layui-icon"></i>添加</button>
				<div style="margin-left:10px;" class="layui-inline">
					<input type="text" id="resource_search_keyword" name="keyword"  placeholder="资源名称" autocomplete="off" class="layui-input">
				</div>
				<button class="layui-btn" onclick="resourceSearch()" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
				<span class="fr" style="line-height:40px"></span>
			</div>
			<!--  资源表格 -->
			<table class="layui-table" lay-filter="resource_table" id="resource_table" style="margin: 0"></table>		</div>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<script src="../../static/js/admin.js" charset="utf-8"></script>
		<script src="../../publicjs/jquery-1.8.0.min.js" charset="utf-8"></script>
		<script src="../../static/js/proTree.js" charset="utf-8"></script>
		<script src="../../publicjs/smallkingutil.js" charset="utf-8"></script>
		<script>
			$(function() {
				commonUtil.setMaxLength(40);
				window.initTree = function(){
					$.ajax({
						url: commonUtil.domain() + '/admin/right/resource/tree',
						success: function(res) {
							var arr = res.data;
							$(".innerUl").html("");
							$(".innerUl").ProTree({
								arr: arr,
								close: true,
								simIcon: "fa fa-list-ol", //单个标题字体图标 不传默认glyphicon-file
								mouIconOpen: "fa fa-bars", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
								mouIconClose: "fa fa-list", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
								callback: function(id, name) {
									window.parentId = id;
									window.parentName = name;
									var data = {
										parentId:id
									}
									resourceTable.refresh(data);
								}
							});
							$('.innerUl').children(".menuUl").children('li').children(".menuUl").show();
							$('.innerUl').children(".menuUl").children('li').children("i").attr('ischek', true).addClass('fa-bars').removeClass('fa-list');
						}
					})
					$('.innerUl').on('click', '.menuUl li span', function(e) {
						$('.innerUl').find('.menuUl li span').css('background', '#FFFFFF')
						$(this).css('background', '#ccc');
					})
			    }
				initTree();
			})
		</script>
		<script>
		layui.use('table', function() {
			var table = layui.table;
			// 加载用户数据表格
			window.resourceTable = table.render({
				id: 'resourceTable',
				elem: '#resource_table',
				url: commonUtil.domain() + '/admin/right/resource/list', //数据接口
				method: 'post',
				page: true, //开启分页
				request: {
					pageName: 'pageNum', // 分页当前页数发给后台的参数名
					limitName: 'pageSize', // 分页每页多少条发给后台的参数名
					countName: 'total'
				},
				done: function(res) {
					$('.layui-laypage-count').text('共' + res.total + '条')
				},
				cols: [
					[ //表头
						{
							field: 'resourceName',
							title: '资源名称',
							width: 100
						}, {
							field: 'type',
							title: '资源类型',
							width: 100,
							templet: "#type"
						}, {
							field: 'resourceUrl',
							title: '资源URL',
							width: 150
						}, {
							field: 'note',
							title: '资源描述',
							width: 120
						}, {
							field: 'icon',
							title: '菜单图标',
							width: 90,
							templet: '#icon'
						}, {
							field: 'parentName',
							title: '所属父级',
							width: 90
						}, {
							field: 'sortCode',
							title: '排序码',
							width: 90
						}, {
							field: 'oper',
							title: '操作',
							width: 75,
							templet: '#oper'
						}
					]
				]
			});
			window.resourceSearch = function(data){
				var keyword = $("#resource_search_keyword").val();
				var data = {};
				if(keyword){
					data.resourceName = keyword;
				}
				resourceTable.refresh(data);
			}
			window.addResource = function(data){
				// 得到左边的被勾选的菜单树
				if(window.parentId){
					WeAdminShow('新增资源','./resource-add.html?parentId=' + parentId + "&parentName=" + parentName);
				}else{
					layer.alert("请先选择父级资源。");
				}
			}
			// 刷新表格
			resourceTable.refresh = function(data) {
				resourceTable.reload({
					where: data,
					page: {
						curr: 1 // 重新从第 1 页开始
					}
				});
			}
			// 监听表格点击删除和修改按钮
			table.on('tool(resource_table)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; // 获得当前行数据
				var resourceId = data.resourceId;
				var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; // 获得当前行 tr 的DOM对象
				if(layEvent === 'update') {
					WeAdminShow('修改资源', './resource-add.html?resourceId=' + data.resourceId)
				}else if(layEvent === 'delete'){
					layer.confirm('确认要删除此资源吗？', function(index) {
						// 删除用户
						var ajaxParam = {
							url: commonUtil.domain() + '/admin/right/resource/delete',
							data: {
								resourceId: resourceId
							}
						}
						ajaxUtil.post(ajaxParam, function(data) {
							if(data.code == 200) {
								layer.alert("删除成功", {
									icon: 6
								}, function() {
									resourceTable.refresh();
									initTree();
									layer.closeAll();
								});
							} else {
								layer.alert(data.msg);
							}
						});
					});
				}
			});
		});
		</script>
		<script type="text/html" id="oper">
			<a title="修改" lay-event="update"><i class="layui-icon">&#xe642;</i></a>
			<a title="删除" lay-event="delete"><i class="layui-icon">&#xe640;</i></a>
		</script>
		<script type="text/html" id="icon">
			<i class="layui-icon">&#{{d.icon}};</i>
		</script>
	</body>

</html>